<template>
	<view class="tab-bar">
		<view class="content">
			<view class="one-tab" v-for="(item, index) in activeBars" :key="index" @click="selectTabBar(item.pagePath)">
				<view>
					<view class="tab-img">
						<image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
						<image v-else class="img" :src="item.iconPath"></image>
					</view>
				</view>
				<view v-if="routePath === item.pagePath" class="tit selectTexts">{{ item.text }}</view>
				<view v-else class="tit texts">{{ item.text }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 当前页面路径
			routePath: {
				type: String,
				required: true
			},
			typeBar:{
				type: Number,
				required: true
			}
		},
		watch: {
			typeBar:{
				handler(newVal){
					if(newVal==1){
						this.activeBars = this.indexBars
					}else if(newVal==2){
						this.activeBars = this.charBars 
					}else{
						this.activeBars = this.charBars 
					}
				},
			    immediate:true
			}
		},
		data() {
			return {
				activeBars:[],
				indexBars: [{
						"pagePath": "/pages/index/index",
						"iconPath": require('@/static/tabbar/index.png'),
						"selectedIconPath": require('@/static/tabbar/index1.png'),
						"text": "首页"
					}, {
						"pagePath": "/pages/assist/assist",
						"iconPath": require('@/static/tabbar/assist.png'),
						"selectedIconPath": require('@/static/tabbar/assist1.png'),
						"text": "辅助就医"
					}, {
						"pagePath": "/pages/monitor/monitor",
						"iconPath": require('@/static/tabbar/monitor.png'),
						"selectedIconPath": require('@/static/tabbar/monitor1.png'),
						"text": "健康监测"
					},
					{
						"pagePath": "/pages/mine/mine",
						"iconPath": require('@/static/tabbar/mine.png'),
						"selectedIconPath": require('@/static/tabbar/mine1.png'),
						"text": "我的"
					}
				],
				charBars:[
					    {
							"pagePath": "/pages/message/message",
							"iconPath": require('@/static/tabbar/message-1.png'),
							"selectedIconPath": require('@/static/tabbar/message.png'),
							"text": "消息"
						}, {
							"pagePath": "/pages/connect/connect",
							"iconPath": require('@/static/tabbar/connect.png'),
							"selectedIconPath": require('@/static/tabbar/connect-1.png'),
							"text": "联系人"
						}, {
							"pagePath": "/pages/connectMine/connectMine",
							"iconPath": require('@/static/tabbar/mine.png'),
							"selectedIconPath": require('@/static/tabbar/mine1.png'),
							"text": "我的"
						}
				]
			};
		},
		methods: {
			selectTabBar(path) {
				// this.$emit('onTabBar', path)
				uni.switchTab({
					url:path
				})
			}
		}
	};
</script>

<style lang="scss">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		padding-top: 10rpx;
		padding-bottom:  constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
        box-shadow: -2rpx 0rpx 6rpx 0rpx rgba(0,0,0,0.1);
		.content {
			display: flex;

			.one-tab {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 50%;

				.tab-img {
					width: 50rpx;
					height: 50rpx;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.tit {
					font-size: 30rpx;
					transform: scale(0.7);
				}

				.selectTexts {
					color: #40D49F;
				}

				.texts {
					color: block;
				}
			}
		}
	}
</style>